<template>
  <div class="content">
    <Navbar title="评论组件"></Navbar>
    <h4>评论子组件</h4>
    <hr />
    <textarea placeholder="输入要BB的内容弄" maxlength="200"></textarea>
    <mt-button type="primary" size="large">发表评论</mt-button>
    <div class="cmt-list">
      <div class="cntItem">
        <div class="cnt-title">第一楼：Mml;用户:匿名用户lhl；发表时间：2019-10-16</div>
        <div class="cnt-body">hi十滴水东山街道倒大霉搜谱的面试京东派山东省跑得慢</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cntItem">
        <div class="cnt-title">第一楼：Mml;用户:匿名用户lhl；发表时间：2019-10-16</div>
        <div class="cnt-body">hi十滴水东山街道倒大霉搜谱的面试京东派山东省跑得慢</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cntItem">
        <div class="cnt-title">第一楼：Mml;用户:匿名用户lhl；发表时间：2019-10-16</div>
        <div class="cnt-body">hi十滴水东山街道倒大霉搜谱的面试京东派山东省跑得慢</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cntItem">
        <div class="cnt-title">第一楼：Mml;用户:匿名用户lhl；发表时间：2019-10-16</div>
        <div class="cnt-body">hi十滴水东山街道倒大霉搜谱的面试京东派山东省跑得慢</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cntItem">
        <div class="cnt-title">第一楼：Mml;用户:匿名用户lhl；发表时间：2019-10-16</div>
        <div class="cnt-body">hi十滴水东山街道倒大霉搜谱的面试京东派山东省跑得慢</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cntItem">
        <div class="cnt-title">第一楼：Mml;用户:匿名用户lhl；发表时间：2019-10-16</div>
        <div class="cnt-body">hi十滴水东山街道倒大霉搜谱的面试京东派山东省跑得慢</div>
      </div>
    </div>
    <div class="cmt-list">
      <div class="cntItem">
        <div class="cnt-title">第一楼：Mml;用户:匿名用户lhl；发表时间：2019-10-16</div>
        <div class="cnt-body">hi十滴水东山街道倒大霉搜谱的面试京东派山东省跑得慢</div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain @click="gitMove">加载更多</mt-button>
  </div>
</template>

<script>
//因为评论的数据要根据，新闻详情的id和当前页数来获取
//所以获取数据的时候参数要带上id和index
//要跟根据ID获取数据，但是这边没有id，所以需要从父组件传递过来
//在做评论组件的时候，在给第几楼用户的时候要写上{{i+1}}
// <div class="cnt-body" >{{item.content==='undefined'?'此用户很懒，什么都没有写':item.content}}渲染内容处<div>
//点击完成加载更多评论更多,在点击事件里求下一页的数据

export default {
  // props: [id],
  data() {
    return {
      pageIndex: 1, //默认第一页数据
      comtents: []
    };
  },
  created() {
    this.getComment();
  },
  methods: {
    getComment() {
      // this.$axios.get("/contents/"+this.id+"pageIndex="+this.pageIndex)
      this.$axios.get("/content").then(data => {
        // this.comtents = data.data;
        //每当获取新数据的时候，不要把老数据清空而是以老数据拼接新的数据
        this.coments = this.coment.concat(data.data);
        console.log(data);
      });
    },
    gitMove() {
      this.pageINdex++;
      this.getComment();
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  h4 {
    font-size: 18px;
  }
}
.cmt-list {
  padding: 5px 5px;
  font-size: 14px;
  .cntItem {
    .cnt-title {
      background: #cccc;
    }

    .cnt-body {
      font-size: 13px;
      text-indent: 2rem;
    }
  }
}
</style>